<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>博客爬虫</title>
    <link href="../static/API/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .button_unit {
            width: 14em;
            height: 3em;
        }
        
        .show_border {
            /* border: 1px solid gray; */
            margin: 1em;
            padding: 1em;
        }
        
        .hoverclass:hover {
            background: #eee;
        }
        
        .footer_font {
            color: gray;
        }
        
        .fixed {
            position: fixed;
            left: 65em;
        }
    </style>
</head>

<body>


    <nav class="navbar navbar-default" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="javascript:void(0);">博客模块</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav nav-pills">
                <li id="top0" class="active"><a href="javascript:void(0);" value='0' class="top">&nbsp;&nbsp;&nbsp;&nbsp;最新推荐&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li id="top1"><a href="javascript:void(0);" value='1' class="top">&nbsp;&nbsp;&nbsp;&nbsp;今日热门&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li id="top2"><a href="javascript:void(0);" value='2' class="top">&nbsp;&nbsp;&nbsp;&nbsp;本周热门&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li id="top3"><a href="javascript:void(0);" value='3' class="top">&nbsp;&nbsp;&nbsp;&nbsp;每日一博&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li id="top4"><a href="javascript:void(0);" value='4' class="top">&nbsp;&nbsp;&nbsp;&nbsp;最新文章&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <select id="select" class="form-control" required="required" onchange="select_select()">
                    <option value='0'>全部</option>
                    <option value='1'>移动开发</option>
                    <option value='2'>前端开发</option>
                    <option value='3'>人工智能</option>
                    <option value='4'>服务端开发/管理</option>
                    <option value='5'>游戏开发</option>
                    <option value='6'>编程语言</option>
                    <option value='7'>数据库</option>
                    <option value='8'>企业开发</option>
                    <option value='9'>图像/多媒体</option>
                    <option value='10'>系统运维</option>
                    <option value='11'>软件工程</option>
                    <option value='12'>大数据</option>
                    <option value='13'>云计算</option>
                    <option value='14'>开源硬件</option>
                    <option value='15'>其他类型</option>
                </select>
            </form>
            <form class="navbar-form navbar-right" role="search" id="page_number">
                <label>当前页数：</label>
                <label id="current_page">1</label>
                <label>&nbsp;&nbsp;</label>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入页数" id="page_input">
                </div>
                <button class="btn btn-default" id="jump_page">跳转</button>
            </form>
        </div>
    </nav>


    <div class="col-xs-11  col-sm-11 col-md-11 col-lg-11">
        <div id="show0" style="display:block">
            <button type="button" class="btn btn-lg btn-info next_page fixed">下一页</button>
            <div id="first0"></div>
            <div id="other0"></div>
        </div>
        <div id="show1" style="display:none">
            <div id="first1"></div>
            <div id="other1"></div>
        </div>
        <div id="show2" style="display:none">
            <div id="first2"></div>
            <div id="other2"></div>
        </div>
        <div id="show3" style="display:none">
            <button type="button" class="btn btn-lg btn-info next_page fixed">下一页</button>
            <div id="first3"></div>
            <div id="other3"></div>
        </div>
        <div id="show4" style="display:none">
            <button type="button" class="btn btn-lg btn-info next_page fixed">下一页</button>
            <div id="first4"></div>
            <div id="other4"></div>
        </div>
    </div>


    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 right_box" style="display:none">

        <button type="button" class="btn btn-default button_unit switch" id="switch0" value='0' classification='0'>全部</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch1" value='1'>移动开发</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch2" value='2'>前端开发</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch3" value='3'>人工智能</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch4" value='4'>服务端开发/管理</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch5" value='5'>游戏开发</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch6" value='6'>编程语言</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch7" value='7'>数据库</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch8" value='8'>企业开发</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch9" value='9'>图像/多媒体</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch10" value='10'>系统运维</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch11" value='11'>软件工程</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch12" value='12'>大数据</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch13" value='13'>云计算</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch14" value='14'>开源硬件</button>
        <button type="button" class="btn btn-default button_unit switch" id="switch15" value='15'>其他类型</button>
    </div>

    <!-- jQuery -->
    <script src="../static/API/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../static/API/bootstrap/js/bootstrap.min.js"></script>

    <script src="static/js/index.js"></script>
</body>

</html>